<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>
  
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {

  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'rank'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
  },
  data() {
    return {
      ranking: [
        {name:'计算机学院',point:20065},
        {name:'语言文学学院',point:20001},
        {name:'电气工程学院',point:19856},
        {name:'机械学院',point:19324},
        {name:'医学院',point:18523},
        {name:'经济管理学院',point:16258},
        {name:'核学院',point:15423},
        {name:'体育学院',point:15224},
        {name:'艺术设计学院',point:14826},
      ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initRank()
    });
    setInterval(()=>{
      //模拟数据更新
      this.updateRankings();
      this.initRank();
    },3000);
  },
  beforeDestroy() {
    if (!this.rank) {
      return
    }
    this.rank.dispose()
    this.rank = null
  },
  methods: {
    updateRankings(){
      //降序排名
      this.ranking.sort((a,b)=>b.point-a.point);
      //模拟数据更新
      this.ranking.forEach(academy=>{
        academy.point+=Math.floor(Math.random()*100);
      },100);
    },
    initRank() {
      this.rank = echarts.init(this.$el, 'macarons')
      var option = {
        title:{
          text:"任务排行榜",
          textStyle:{
            color:"rgba(255,255,255,.5)",
            fontSize:20,
          },
          left:"right",
          top:50
        },
        tooltip:{},
        grid: {
          top: 100,
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true //删除背景网格线
        },
        xAxis:{
          type:'value',
          show:false //去掉xAxis轴
        },
        yAxis:{
          axisTick:{show:false},//去掉刻度
          axisLine:{show:false},//去掉轴线
          type:'category',
          data:this.ranking.map(academy=>academy.name)
          
        },
        series:[{
          data:this.ranking.map(academy=>academy.point),
          type:'bar'
        }]
      };
      this.rank.setOption(option);
    },
  }
}
</script>
<style scoped>
</style>
  
 